<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>派生选择器</title>
    <style>
        /* *表示浏览器中所有的元素 */
         *{
             padding:0;
             margin:0;
         }

         .main{
             width: 400px;
             height: 400px;
             background-color: pink;

         }
        /* 组群选择器 */
         #d1,p{
             width: 300px;
             height: 300px;
             background-color: green;
         } 
        /* 包含选择器，选择#u1这个元素中所有的li */
        #u1 li{
             background-color: pink;
         }
        /* 直接包含选择器，选择#u2这个元素中子类li */
         #u2>li{
             background-color: green;
         }
         /* 属性选择器 */
         input[type=text]{
                 width: 200px;
                 height: 50px;
         }
             
         /* 子类选择器：选择#o1中所有的偶数位的li */
         #o1 li:nth-child(even){
              background-color: pink;
         }

         #o1 li:nth-child(odd){
              background-color:yellowgreen;
         }
         /* 选择#o1中鼠标悬停的li */
         #o1 li:hover{
             background-color: red;
         }
    </style>
</head>
<body>
    <ol id="o1">
        <li>ol-li-1</li>
        <li>ol-li-2</li>
        <li>ol-li-3</li>
        <li>ol-li-4</li>
        <li>ol-li-5</li>
        <li>ol-li-6</li>
        <li>ol-li-7</li>
        <li>ol-li-8</li>
        <li>ol-li-9</li>
        <li>ol-li-10</li>
        <li>ol-li-11</li>
        <li>ol-li-12</li>
        <li>ol-li-13</li>
        <li>ol-li-14</li>
        <li>ol-li-15</li>
        <li>ol-li-16</li>
        <li>ol-li-17</li>
        <li>ol-li-18</li>
        <li>ol-li-19</li>
        <li>ol-li-20</li>
    </ol>


    <input type="text">
    <input type="password">
    <!-- .main -->
     <div class="main"></div>
     <div id="d1"></div>
     <p></p>
 <!-- ul>li{ul-li-$}*10 -->
     <ul id="u1">
         <li>ul-li-1</li>
         <li>ul-li-2</li>
         <li>ul-li-3</li>
         <li>ul-li-4</li>
         <li>ul-li-5</li>
         <li>ul-li-6</li>
         <li>ul-li-7</li>
         <li>ul-li-8</li>
         <li>ul-li-9</li>
         <li>ul-li-10</li>
         <ol>
             <li>ul-ol-li</li>
             <li>ul-ol-li</li>
             <li>ul-ol-li</li>
             <li>ul-ol-li</li>
             <li>ul-ol-li</li>
         </ol>
     </ul>

     <ul id="u2">
        <li>ul-li-1</li>
        <li>ul-li-2</li>
        <li>ul-li-3</li>
        <li>ul-li-4</li>
        <li>ul-li-5</li>
        <li>ul-li-6</li>
        <li>ul-li-7</li>
        <li>ul-li-8</li>
        <li>ul-li-9</li>
        <li>ul-li-10</li>
        <ol>
            <li>ul-ol-li</li>
            <li>ul-ol-li</li>
            <li>ul-ol-li</li>
            <li>ul-ol-li</li>
            <li>ul-ol-li</li>
        </ol>
    </ul>

     
</body>
</html>